<template>
	<view class="Tabs">
		<!-- <view class="TabsView" v-if="list.data && list.data.length > 0" :style="{ background: list.BgColor }">
			<view v-for="(item, index) in list.data" :key="index">
				<view class="TabsItem" @click="TabsChange(index)">
					<view style="padding: 14px 12px;" v-if="list.Style == 'One'">
						<text class="TabsName" :style="{ color: index == current ? list.SelectColor : list.FontColor }">{{ item.name }}</text>
						<view class="TabsLine" :style="{ 'border-color': index == current ? list.LineColor : '#fff' }"></view>
					</view>
					<view class="TabsTwo" :style="{ background: index == current ? list.BgCurrentColor : '' }">
						<text :style="{ color: index == current ? list.SelectColor : list.FontColor }">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view> -->
		<view style="padding: 10px 10px 0px 10px ;background: #fff;">
			<u-tabs
				:list="list.data"
				height="60"
				duration="0"
				:is-scroll="true"
				:show-bar="list.Style == 'Two' ? false : true"
				:inactive-color="list.FontColor"
				:active-color="list.Style == 'Two' ? list.SelectColor : list.LineColor"
				:active-item-style="list.Style == 'Two' ? list.Two : ''"
				:current="current"
				@change="TabsChange"
			></u-tabs>
		</view>
	</view>
</template>
<script>
export default {
	name: '',
	components: {},
	data() {
		return {
			current: 0,
			list: {
				type: 'Tabs',
				status: 2, // 默认状态
				SelectColor: '#333', //选中颜色
				LineColor: '#E6B738', //选中条颜色
				FontColor: '#999', //文字颜色
				Style: 'Two', //样式
				BgCurrentColor: '#E6B738', //选中背景
				Two: { background: '#E6B738', 'border-radius': '60px' },
				BgColor: '#fff', //背景颜色
				data: [
					{ name: '分类1', value: 1 },
					{ name: '分类2', value: 2 },
					{ name: '分类3', value: 3 },
					{ name: '分类4', value: 4 },
					{ name: '分类5', value: 5 },
					{ name: '分类6', value: 6 }
				], // 数据
				options: {} // 选项操作
			},
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		TabsChange(row) {
			this.current = row;
		}
	}
};
</script>
<style lang="scss" scoped>
.Tabs {
	.TabsView {
		padding: 0 20rpx;
		box-sizing: border-box;
		/* width: 400px; */
		overflow-x: auto;
		display: flex;
		align-items: center;

		.TabsItem {
			width: max-content;
			position: relative;
			/* padding: 14px 12px; */

			.TabsName {
				/* color: #E6B738; */
			}

			.TabsLine {
				border-bottom: 8rpx solid;
				width: 60rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.TabsTwo {
			padding: 8rpx 32rpx;
			border-radius: 60rpx;
			margin: 20rpx 10rpx 20rpx 0;
		}
	}
}
</style>
